<template>
  <div class="container">
    <el-card class="project-card-content" v-for="(project,index) in projects" :key="index">
      <div class="project">
        <svg-icon icon-class="project"/>
        {{project.name}}
      </div>
      <span class="project-description-text">
        <svg-icon icon-class="description"/>项目简介:
      </span>
      <div class="project-description">
        {{project.description}}
      </div>
      <span class="project-description-text">
         <svg-icon icon-class="show"/>项目展示:
      </span>
      <div class="project-show">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" v-for="(item,i) in project.images" :key="i">
            <el-image :src="item" :preview-src-list="project.images" z-index="9999"></el-image>
          </el-col>
        </el-row>
      </div>
      <div class="skill">
        <div v-for="(skill,s) in project.skill" :key="s">
          <el-tag type="info" size="mini"><svg-icon :icon-class="skill.svg"/>{{skill.name}}</el-tag>
          <el-divider direction="vertical" v-if="s+1<project.skill.length"></el-divider>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import Data from '@/data/data.json'
export default defineComponent({
  name: "Project",
  setup(){
    const projects = Data.project
    return {
      projects
    }
  }
})
</script>

<style scoped lang="scss">

.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .project-card-content {
    margin: 80px;
    ::v-deep .el-card__body {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .project {
      font-weight: bolder;
    }

    .project-skill{
      margin-top: 20px;
      font-size: 14px;
      font-weight: bolder;
    }

    .project-skill-detail{
      margin-top: 10px;
      padding-left: 50px;
      font-size: 14px;
    }

    .project-description-text {
      margin-top: 20px;
      font-size: 14px;
      font-weight: bolder;
    }

    .project-description {
      margin-top: 10px;
      padding-left: 50px;
      font-size: 14px;
    }

    .project-show {
      margin-top: 20px;
    }
    .skill{
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
    }
  }

}
</style>